<script setup xmlns:el-col="http://www.w3.org/1999/html">

import {h, onMounted, onUnmounted, onUpdated, ref} from "vue";
import axios from "axios";
import bg  from '/src/assets/01.webp'
import bg1  from "/src/assets/02.webp"
import bg2  from '/src/assets/03.webp'
import bg3  from '/src/assets/04.webp'
import {ElNotification} from "element-plus";
import {Position} from "@element-plus/icons-vue";
//加载框

const fullscreenLoading = ref(false)
const openoff=ref(false)
//图片地址
const img=ref([{
  url:bg2,
  name:''
},
  {
    url:bg,
    name:''
  },
  {
    url:bg3,
    name:''
  }
  ,
  {
    url:bg1,
    name:''
  }

])
const news=ref([{
  content:
      " 央视网董事长过彤: 培育媒体新质生产力 赋能网络视听新发展"
},
  {
    content: "焦点访谈：鱼从山中来"
  }
  ,
  {
    content: "\n" +
        "各行各业跑出高质量发展“加速度” 实干前行不断提升居民“幸福指数”"
  }
  ,
  {
    content: "花漾贵州”邀世界共赴春日之约"
  }
  ,
  {
    content: "\n" +
        "击鼓催征拼开局丨向西开放 新疆旅游打开发展新空间"
  }
  ,
  {
    content: "世界互联网大会数字丝路发展论坛将于4月16日在西安举行"
  }
])
const category=ref([]);
const categoryid=ref();


const getall= ()=>{
  axios.get("/allcategory").then(result=>{

    category.value=result.data.data;

  }).catch(err=>{
    return   ElNotification({
      title: '消息',
      message: h('i', { style: 'color: teal' },'数据异常 请联系管理员'),
    })
  })
}
const SparkDesk=ref("")
const Answer=ref("")
const lvyou=ref("现在你的身份是一个导游，请你为我推荐一些国内旅游景点,最好是能够为我列出行程以及时间，规划清晰，最好是为我算出花费以及成本,给出建议,尽量简洁的告诉我即可")
const story=ref("现在你的身份是一个作家，请你为小朋友,创作一个故事,要求故事情节有趣。")
const  fooder=ref("现在你的身份是一个美食家，请你为我推荐一些美食，并且给出制作方法")
const  computer=ref("现在您的身份是一名计算机专家,请你为我解答计算机问题好吗,并且请你举例一个问题,不用太多字数")
const defaultask=(words)=>{
  openoff.value=true
  //拿到用户的问题
  const sparkask = words;
  const scorll = document.getElementById('scroll');
  // const outputElement2 = document.getElementById('text');

// // 创建一个span元素并设置样式为简约颜色和金色边框 用户输入的部分
//   const spanElement = document.createElement('span');
//   spanElement.style.color = 'black'; // 设置字体颜色为navy，可以根据需要更改颜色
//   spanElement.style.width='100%'// 设置边框为2像素宽的金色实线
//   const img1 = document.createElement('img');
//   img1.src = "https://img2.imgtp.com/2024/05/17/IqoqzFxf.png";
//   img1.style.width = "auto";
//   img1.style.height = "6%";
//   img1.style.alignItems = "left";
//   img1.size='small'
//   spanElement.appendChild(img1);
//   spanElement.appendChild(document.createTextNode( sparkask));
//
//
//   outputElement2.appendChild(spanElement);
//
//   const hr1 = document.createElement("hr");
//   const br1 = document.createElement("br");
//   outputElement2.appendChild(hr1);
//   outputElement2.appendChild(br1);
  const outputElement1 = document.getElementById('text');
  const img = document.createElement('img');
  img.src = "https://img2.imgtp.com/2024/05/17/Pve1p0zP.png";
  img.style.width = "auto";
  img.style.height = "5%";
  img.style.alignItems = "left";
  outputElement1.appendChild(img);
  scorll.scrollTop = scorll.scrollHeight;
  SparkDesk.value=""
  axios.get("/chat/chating", {params:{
      question:sparkask
    }}).then(result => {
    //拿到结果开启加载
    fullscreenLoading.value = true
    //打开 按钮开关
    setTimeout(()=>{

      fullscreenLoading.value=false
    },500)
    if (result.data.code==0){


//拿到回答
      Answer.value = result.data.data;
      const text = Answer.value;
      let index = 0;
      const outputElement = document.getElementById('text');
      const scorll = document.getElementById('scroll');
      function printText() {
        if (index < text.length) {
          openoff.value=true
          scorll.scrollTop = scorll.scrollHeight; // 滚动到底部
          outputElement.append(document.createTextNode(text.charAt(index)));
          index++;
          setTimeout(printText, 50); // 控制打印速度，单位为毫秒
        } else {
          // 文本打印完成
          const elDivider = document.createElement('br');
          outputElement.appendChild(elDivider);
          const hr = document.createElement('hr');
          outputElement.appendChild(hr);
          // 打印完成后再次滚动到底部
          scorll.scrollTop = scorll.scrollHeight;
          openoff.value=false;
        }
      }

      printText();


    }

    if (result.data.code==1){
      return   ElNotification({
        title: '消息',
        message: h('i', { style: 'color: teal' },result.data.data),
      })
    }

  }).catch(error => {
    openoff.value=false
    return   ElNotification({
      title: '消息',
      message: h('i', { style: 'color: teal' },error.message),
    })
  }).finally(()=>{

  });
}
//讯飞的接口
const xfee = (question) => {
  //防止二次提交
  openoff.value=true
  //拿到用户的问题
  const sparkask = SparkDesk.value;
  const scorll = document.getElementById('scroll');
  const outputElement2 = document.getElementById('text');

// 创建一个span元素并设置样式为简约颜色和金色边框 用户输入的部分
  const spanElement = document.createElement('span');
  spanElement.style.color = 'black'; // 设置字体颜色为navy，可以根据需要更改颜色
  spanElement.style.width='100%'// 设置边框为2像素宽的金色实线
  const img1 = document.createElement('img');
  img1.src = "https://img2.imgtp.com/2024/05/17/IqoqzFxf.png";
  img1.style.width = "auto";
  img1.style.height = "6%";
  img1.style.alignItems = "left";
  img1.size='small'
  spanElement.appendChild(img1);
  spanElement.appendChild(document.createTextNode( sparkask));


  outputElement2.appendChild(spanElement);

  const hr1 = document.createElement("hr");
  const br1 = document.createElement("br");
  outputElement2.appendChild(hr1);
  outputElement2.appendChild(br1);
  const outputElement1 = document.getElementById('text');
  const img = document.createElement('img');
  img.src = "https://img2.imgtp.com/2024/05/17/Pve1p0zP.png";
  img.style.width = "auto";
  img.style.height = "5%";
  img.style.alignItems = "left";
  outputElement1.appendChild(img);
  scorll.scrollTop = scorll.scrollHeight;
  SparkDesk.value=""
  axios.get("/chat/chating", {params:{
      question:sparkask
    }}).then(result => {
    //拿到结果开启加载
    fullscreenLoading.value = true
    //打开 按钮开关
    setTimeout(()=>{

      fullscreenLoading.value=false
    },500)
    if (result.data.code==0){


//拿到回答
      Answer.value = result.data.data;
      const text = Answer.value;
      let index = 0;
      const outputElement = document.getElementById('text');
      const scorll = document.getElementById('scroll');
      function printText() {
        if (index < text.length) {
          openoff.value=true
          scorll.scrollTop = scorll.scrollHeight; // 滚动到底部
          outputElement.append(document.createTextNode(text.charAt(index)));
          index++;
          setTimeout(printText, 50); // 控制打印速度，单位为毫秒
        } else {
          // 文本打印完成
          const elDivider = document.createElement('br');
          outputElement.appendChild(elDivider);
          const hr = document.createElement('hr');
          outputElement.appendChild(hr);
          // 打印完成后再次滚动到底部
          scorll.scrollTop = scorll.scrollHeight;
          openoff.value=false;
        }
      }

      printText();


    }

    if (result.data.code==1){
      return   ElNotification({
        title: '消息',
        message: h('i', { style: 'color: teal' },result.data.data),
      })
    }

  }).catch(error => {
    openoff.value=false
    return   ElNotification({
      title: '消息',
      message: h('i', { style: 'color: teal' },error.message),
    })
  }).finally(()=>{

  });
}
onMounted(()=>{

  getall()


})

</script>

<template>

  <div class="common-layout">
    <el-container>
      <el-main>
        <el-row>

          <el-col :span="24">

            <el-row>
              <el-col :span="24">
                <el-card>
                  <el-row>
                    <el-avatar size="small"
                               src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    /><p style="text-align: center" >Xfee人工智能小助手</p>
                    <small>V3.5</small>
                  </el-row>
                  <el-row>


           <el-text type="warning" style="font-size: 20px;font-family: '幼圆';font-weight: bold">3.5大模型更加智能！支持上下文对话！功能升级！响应更快 涉及场景更多！您可以点击以下身份体验功能！</el-text>
<el-row style="font-size: 18px;font-family: ''">
  <el-col :span="6">
    <el-card @click="defaultask(lvyou)" style="height: 180px; max-width: 480px; display: flex; justify-content: center; align-items: center;">
      <template #header>旅游推荐官</template>
      <img
          src="https://cdn.pixabay.com/photo/2022/04/02/13/46/man-7107051_1280.png"
          style="max-width: 100%; max-height: 100%;"
      />
    </el-card>
  </el-col>
    <el-col :span="6">
      <el-card @click="defaultask(fooder)"  style="height: 180px; max-width: 480px; display: flex; justify-content: center; align-items: center;">
        <template #header>美食推荐家</template>
        <img
            src="https://cdn.pixabay.com/photo/2016/04/01/09/52/cartoon-1299636_1280.png"
            style="max-width: 100%; max-height: 100%;"
        />
      </el-card>
  </el-col>
    <el-col :span="6">
      <el-card  @click="defaultask(computer)" style="height: 180px; max-width: 480px; display: flex; justify-content: center; align-items: center;">
        <template #header>计算机问题专家</template>
        <img
            src="https://pic.616pic.com/ys_bnew_img/00/02/54/X94Rs2T0s1.jpg"
            style="max-width: 100%; max-height: 100%;"
        />
      </el-card>
  </el-col>
    <el-col :span="6">
      <el-card  @click="defaultask(story)" style="height: 180px; max-width: 480px; display: flex; justify-content: center; align-items: center;">
        <template #header>童话故事创作者</template>
        <img
            src="https://img.ixintu.com/download/jpg/201912/f084d11dd4a8c1f4b6874848ba851c94.jpg!con"
            style="max-width: 100%; max-height: 100%;"
        />
      </el-card>
  </el-col>
</el-row>
                  <el-col :span="24">
                    <el-text type="warning" style="font-family: '幼圆';font-size: 20px;font-weight: bold">等更多相关内容欢迎您探索！</el-text>

                  </el-col>
                  </el-row>



                  <el-card  style="height: 300px; ">
                    <div style="height: 300px; overflow: scroll; " id="scroll">

                      <el-text id="text"   style="justify-items: start;justify-content:start;color: black;font-size: larger;height:300px" >

                      </el-text>
                    </div>


                  </el-card>



                </el-card>
              </el-col>

            </el-row>
            <el-card style="">


              <el-input type="textarea"  rows="3" show-word-limit="true" maxlength="1024"  v-model="SparkDesk" placeholder="请输入您要咨询的问题" >

              </el-input>
              <el-button style="width: 100%;color: white;border-radius:5%;" icon="search" type="primary" @click="xfee(SparkDesk)" v-loading.fullscreen.lock="fullscreenLoading" :disabled="openoff">询问</el-button>

            </el-card>
          </el-col>
        </el-row>



      </el-main>
    </el-container>
  </div>

</template>

<style scoped>
.common-layout{
  font-family: '微軟正黑體 Light';
}
.box{

  justify-items:start;
  justify-content: start;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
</style>